import React, { Component } from 'react';
import { Ellipsis ,InfiniteScroll,Toast} from 'antd-mobile'
import * as service from "../api/index"
import  "../styles/Linklist.scss"
class Linklist extends Component {

  constructor(props){
    super(props)
    this.state={
        list_right:[],
        id:"",
        loadMore:true,
        hasMore:true,
        yeshu:2,    //这个是发请求的页数
        daodi:true,
        list_left:[],
        yeshu2:3

    }
  }
    async componentDidMount() {
        //请求
        var res = await service.recommendlist_list({ count: 1, limitNum: 5 })
        this.state.list2 = res.data.data
        this.setState({ list_right: res.data.data })
        var res = await service.recommendlist_list({ count: 2, limitNum: 5 })
        this.state.list2 = res.data.data
        this.setState({ list_left: res.data.data })
     
    }
  async  quanbushangpin(id) {
        // 这里要拿到对应的组件实例，然后通过组件实例对象来进行页面跳转，因为路由需要基于当前组件实例在哪里，才能跳，不然history.push就是个空对象
           if( this.props.Car){
            this.props.Car.props.history.push({pathname: "/Xiangqing", state: { id: id }} )
           }else if(this.props.shouye){
            this.props.shouye.props.history.push({pathname: "/Xiangqing", state: { id: id }} )
           }else {

            this.props.getid.call(this.props.xiangqing,id);
           }

        
    }


    
    async  loadMore(){             //这个函数就是当到达触底的临界值时就会触发

      if( this.state.yeshu%2==0){
        this.state.yeshu++
        this.setState({yeshu: this.state.yeshu})
        var res = await service.recommendlist_list({ count: this.state.yeshu, limitNum: 3 })
         if(res.data.data.length==0){
           this.state.daodi=false
         }
       this.state.list_left.push(...res.data.data)
      }else{
        this.state.yeshu++
        var res = await service.recommendlist_list({ count: this.state.yeshu2, limitNum: 3 })
        if(res.data.data.length==0){
          this.state.daodi=false
        }
      this.state.list_right.push(...res.data.data)
      }
       
        // this.state.yeshu2++
        
   

    }
   
     //到达底部
    daodi(){
        Toast.show({
            content: '已是全部数据',
          })

    }
    render() {
        return (
            <div className='Linklist'>
                <div className='shangpin'>
                      <div className='left'>
                      {this.state.list_right.map((item, index) => (
                                < div className="item" onClick={()=>{this.quanbushangpin(item.proid) }} key={index}>
                                        <img src={item.img1} alt="" />
                                        <Ellipsis rows={2} direction='end' content={item.proname} />
                                        <p>￥{item.originprice}</p>
                                </div>
                            ))}
                              
                      </div>
                      <div className='right'>
                      {this.state.list_left.map((item, index) => (
                                < div className="item2" onClick={()=>{this.quanbushangpin(item.proid) }} key={index}>
                                        <img src={item.img1} alt="" />
                                        <Ellipsis rows={2} direction='end' content={item.proname} />
                                        <p>￥{item.originprice}</p>
                                </div>
                            ))}
                      </div>
                   
                        <InfiniteScroll loadMore={()=>{this.state.daodi?this.loadMore():this.daodi()}} hasMore={this.state.hasMore} />
                </div>
            </div>
        );
    }
}

export default Linklist;